<template>
	<view class="newsBox">
		<view class="flex newsItem" v-for="(item,i) in newsList" :key='item.id'>
			<image :src="newsListImage[i]" mode="aspectFill" class="leftImage" @click="preView(i)"></image>
			<view class="PL rightTextContent" @click="goDetail(item.id)">
				<view class="manyTextOverflow">{{item.title}}</view>
				<view class="flex date">
					<text>发表时间：{{$dateFormat(item.add_time)}}</text>
					<text>预览：{{item.click}}次</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 资讯列表
				newsList:[],
				// 资讯列表图片
				newsListImage:[
					'https://tse1-mm.cn.bing.net/th/id/OIP-C.nJSVls_ngO5dmzXSaq6JdQHaKw?w=204&h=297&c=7&r=0&o=5&pid=1.7',
					'https://tse1-mm.cn.bing.net/th/id/OIP-C.VS4ceq4muJSOhl-AmFCJgAHaKv?w=204&h=297&c=7&r=0&o=5&pid=1.7',
					'https://tse1-mm.cn.bing.net/th/id/OIP-C.7IbQwxHLRBh7llK8e9I4hwHaKv?w=204&h=297&c=7&r=0&o=5&pid=1.7',
					'https://tse2-mm.cn.bing.net/th/id/OIP-C.JqtoexPmTYpM2-jEAb-wOgHaNK?w=187&h=333&c=7&r=0&o=5&pid=1.7',
					'https://tse2-mm.cn.bing.net/th/id/OIP-C.UV57_hbaMVve5Uxr3Kt9jAHaKr?w=204&h=294&c=7&r=0&o=5&pid=1.7',
					'https://tse4-mm.cn.bing.net/th/id/OIP-C.IYweZBMJ-HnqNoGSQin7fwHaKw?w=204&h=297&c=7&r=0&o=5&pid=1.7',
					'https://tse4-mm.cn.bing.net/th/id/OIP-C.iKdS-5CYt2ynoIaxzKscBgHaNK?w=187&h=333&c=7&r=0&o=5&pid=1.7',
					'https://tse1-mm.cn.bing.net/th/id/OIP-C.WZqlZ86NOXpzXYepnZa41gHaKx?w=204&h=297&c=7&r=0&o=5&pid=1.7',
					'https://tse4-mm.cn.bing.net/th/id/OIP-C.05SA5B2QcXXOwa1ovQ0XugHaLH?w=204&h=306&c=7&r=0&o=5&pid=1.7',
					'https://tse2-mm.cn.bing.net/th/id/OIP-C.JqtoexPmTYpM2-jEAb-wOgHaNK?w=187&h=333&c=7&r=0&o=5&pid=1.7',
				],
			}
		},
		onLoad() {
			this.reqNewsList()
		},
		methods: {
			// 获取资讯列表
			async reqNewsList(){
				const {data} = await this.$myRequest({
					url:'/api/getnewslist'
				});
				this.newsList = data.message;
			},
			// 点击查看大图
			preView(i){
				uni.previewImage({
					current:i,
					urls:this.newsListImage
				})
			},
			// 跳转至详情页
			goDetail(id){
				uni.navigateTo({
					url:`/pages/newsDetail/newsDetail?id=${id}`
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.newsBox{
	.newsItem{
		color: #fff;
		height: 160rpx;
		margin: 10rpx 0;
		padding: 8rpx 16rpx;
		background-color: $themeColor;
		.leftImage{
			width: 30%;
			height: 100%;
		}
		.rightTextContent{
			display: flex;
			width: 70%;
			height: 100%;
			flex-wrap: wrap;
			justify-content: space-around;
			.manyTextOverflow{
				width: 100%;
				font-size: 38rpx;
				-webkit-line-clamp: 2;
			}
			.date{
				width: 100%;
				justify-content: space-between;
			}
		}
	}
}
</style>
